<template>
  <div id="app">
    <div class="left">
      <p>
        <input type="text" v-model="username" />
        <span style="color:red" v-show="yes">用户名必须是6到18位</span>
        <button @click="login">登录</button>
      </p>
      <p>
        <button v-show="islogin" @click="layout">退出</button>
      </p>
    </div>
    <div class="right">
      <section v-show="islogin">
        <div v-for="(item,key) in ques" :key="key" v-show="key==num">
          <h3>{{item.title}}</h3>
          <ul>
            <li v-for="(it,k) in item.options" :key="k">
              <input type="radio" :name="item.title" :value="k" v-model="arr[key]" />
              {{it}}
            </li>
          </ul>
        </div>
        <footer>
          <button @click="next" v-show="!isnew">下一道题</button>
          <button v-show="isnew" @click="renew">重新答题</button>
          <p>
            <span v-show="!isnew">共有：{{num+1}}/{{ques.length}}</span>
            <span v-show="isnew">共有：4/{{ques.length}}</span>
            答对：{{rigth}}打错:{{error}}
            </p>
        </footer>
      </section>
    </div>
  </div>
</template>
<script>
import question from "@/assets/data.json";
console.log(question);
export default {
  data() {
    return {
      islogin: false,
      username: "",
      yes: false,
      ques: question.data,
      num: 0,
      isnew: false,
      rigth: 0,
      error: 0,
      arr:[]
    };
  },
  methods: {
    login() {
      if (this.username.length < 6 || this.username.length > 18) {
        this.yes = true;
        return false;
      }
      this.islogin = true;
      this.yes = false;
    },
    next() {
      if (this.arr[num] == this.ques[this.num].right) {
        this.right++;
      } else {
        this.error++;
      }
      if (this.num < this.ques.length) {
        this.num++;
      }
      if (this.num == this.ques.length) {
        this.isnew = true;
      }
    },
    renew() {
      this.num = 0;
      this.isnew = false;
      this.rigth=this.error=0
    },
    layout(){
      this.islogin=false
      this.num=0
      this.rigth=0
      this.err=0
      this.arr=[]
    }
  },
};
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  display: flex;
  height: 500px;
  & > div {
    flex: 1;
    border: 1px solid #000;
  }
}
.rigth {
  padding: 20px;
  ul {
    padding-left: 20px;
    list-style: none;
  }
}
section {
  height: 100%;
  position: relative;
}
footer {
  position: absolute;
  left: 0;
  bottom: 20px;
}
</style>
